<template>
	<view class="myInfo">
		<!--头像区域-->
		<view class="top">
			<view class="user-img">
				<image :src="UserInfo.cover"></image>
			</view>
			<view class="caozuo">
				<button @click="pre" class="pre">
					<uni-icons type="left" size="30"></uni-icons> </button>
				<button @click="next" class="next"> <uni-icons type="right" size="30"></uni-icons>
				</button>
			</view>

		</view>
		<!-- info信息 -->
		<view class="info">

			<view class="username subInfo">
				<view class="left">用户名：</view><input type="text" v-model="UserInfo.username" disabled>
			</view>
			<view class="sex subInfo">
				<view class="left">性 别：</view><input type="text" v-model="UserInfo.sex">
			</view>
			<view class="age subInfo">
				<view class="left">年 龄：</view><input type="text" v-model="UserInfo.age">
			</view>
			<view class="edu subInfo">
				<view class="left">学 历：</view><input type="text" v-model="UserInfo.edu">
			</view>
			<view class="school subInfo">
				<view class="left">学 校：</view><input type="text" v-model="UserInfo.school">
			</view>
		</view>

		<view class="changInfo" v-if=isShow>
			<button @click="changInfo">修改信息</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				len: 0,
				imgList: [
					'https://img.bosszhipin.com/boss/avatar/avatar_1.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_2.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_3.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_4.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_5.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_6.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_7.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_8.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_9.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_10.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_11.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_12.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_13.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_14.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_15.png',
					'https://img.bosszhipin.com/boss/avatar/avatar_16.png'
				],
				UserInfo: {
					_id: '',
					username: '',
					cover: '',
					sex: '',
					age: '',
					edu: '',
					school: ''
				},
				id: '',
				isShow: ''
			};
		},
		onLoad(option) {
			if(option.id === "1" ){
				this.isShow = false
				this.id = option.user_id
			}else{
				this.isShow = true
				this.id = this.$store.state.user._id
			}
			uni.setNavigationBarColor({
				frontColor: "#000000",
				backgroundColor: '#00b4b3'
			});
			this.get_user();
		},
		onUnload() {
			this.$store.state.cover = this.UserInfo.cover
			console.log(this.$store.state.cover)
		},
		methods: {
			pre() {
				if (this.$data.len > 0) {
					this.$data.len--,
						this.UserInfo.cover = this.$data.imgList[this.$data.len],
						this.$store.state.user.cover = this.UserInfo.cover
				}
			},
			next() {
				if (this.$data.len < this.imgList.length - 1) {
					this.$data.len++,
						this.UserInfo.cover = this.$data.imgList[this.$data.len],
						this.$store.state.user.cover = this.UserInfo.cover
				}
			},
			get_user() {
				this.$api.get_user({
					name: 'get_user'
				}).then((res) => {
					for (let i = 0; i < res.data.length; i++) {
						if (res.data[i]._id == this.id) {
							this.UserInfo = res.data[i]
							console.log(res.data[i])
						}
					}
				})
			},
			changInfo() {
				console.log(this.UserInfo)
				this.$api.update_user({
					name: 'update_user',
					id: this.UserInfo._id,
					cover: this.UserInfo.cover,
					sex: this.UserInfo.sex,
					age: this.UserInfo.age,
					edu: this.UserInfo.edu,
					school: this.UserInfo.school
				}).then((res) => {
					// console.log(res)
					this.$store.state.user.id=this.UserInfo._id,
					this.$store.state.user.cover=this.UserInfo.cover,
					this.$store.state.user.sex=this.UserInfo.sex,
					this.$store.state.user.age=this.UserInfo.age,
					this.$store.state.user.edu=this.UserInfo.edu,
					this.$store.state.user.school=this.UserInfo.school,
					console.log(this.$store.state.user)
					uni.showToast({
						title: '信息更新成功',
						icon: 'none'
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	.myInfo {
		width: 100vw;
		height: 96vh;


		.top {
			// background: $boss-base-color;
			background: #3A4861;
			width: 100%;
			padding: 30rpx 0;

			.user-img {
				width: 252rpx;
				margin: 0 auto;
			}

			image {
				width: 252rpx;
				height: 252rpx;
				border-radius: 20%;
				border: 6rpx solid #777F92;
			}

			.caozuo {
				position: absolute;

				height: 30px;
				display: flex;
				flex-direction: row;
				align-items: center;
				top: 140rpx;
				width: 100%;


				.pre {
					margin-left: 33rpx;
					padding-left: 0px;
					width: 8%;
					border-radius: 20px;
				}

				.next {
					margin-right: 33rpx;
					padding-left: 0px;
					width: 8%;
					border-radius: 20px;
				}
			}
		}

		.info {
			width: 96%;
			display: flex;
			flex-direction: column;
			height: 50vh;
			font-size: 18px;
			padding: 5px;
			border-radius: 20rpx;
			border: 1px solid gainsboro;
			margin: 10px auto;
			background-color: $boss-base-color;
			.subInfo {
				// float: left;
				width: 98%;
				margin: 0 auto;
				padding: 0 auto;
				height: 10vh;
				display: flex;
				align-items: center;
				border-radius: 20rpx;
				position: relative;
				flex-direction: row;

				.left {
					padding: 0;
					margin: 0;
					width: 21%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: right;
				}

				input {
					float: right;
					margin-right: 0px;
					width: 100%;
					background: white;
					border-radius: 20rpx;
					height: 5vh;
				}
			}
		}

		.changInfo {
			position: fixed;
			bottom: 5vh;
			width: 100%;

			button {
				width: 300rpx;
				text-align: center;
				border-radius: 20px;
				background-color: $boss-base-color;
			}

		}
	}
</style>